<template>
  <div>
    <div class="block">
      <span class="demonstration">时间范围</span>
      <el-date-picker
        style="margin: 20px"
        v-model="timevalue"
        type="daterange"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="yyyy-MM-dd HH:mm:ss"
      >
      </el-date-picker>
      <el-button type="success" @click="searchBtn">查询</el-button>
    </div>

    <!-- 图表 -->
    <div class="chart" id="chart"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import {HHMMSS} from '@/utils/utils'
import { ordertotal } from "@/apis/echarts";
export default {
  mounted(){
  var myChart = echarts.init(document.getElementById("chart"));
  var  option = {
    color:['#99CC33','#FFCC00'],
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            crossStyle: {
                color: '#999'
            }
        }
    },
    toolbox: {
        feature: {
            dataView: {show: true, readOnly: false},
            magicType: {show: true, type: ['line', 'bar']},
            restore: {show: true},
            saveAsImage: {show: true}
        }
    },
    legend: {
        data: ['下单时间', '订单金额']
    },
    xAxis: [
        {
            type: 'category',
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            axisPointer: {
                type: 'shadow'
            }
        }
    ],
    yAxis: [
     
        {
            type: 'value',
            name: '金额',
            min: 0,
            max: 99,
            interval: 10,
            axisLabel: {
                formatter: '￥ {value} '
            }
        }
    ],
    series: [
        {
            name: '下单时间',
            type: 'bar',
            data:[12,13,14,15,12,14,2,24,23,18,21,22]
        },
        {
            name: '订单金额',
            type: 'bar',
            // yAxisIndex: 1,
            data:[22,33,77,62,14,14,54,65,24,76,35,34]
        }
    ]
};
      myChart.setOption(option);

  },
  data() {
    return {

      timevalue: '',
      orderTime:[],
      orderAmount:[],

    };
  },
  methods:{
    //点击查询
    searchBtn(){
      this.orderTime=[]
      this.orderAmount=[]
      ordertotal({date:JSON.stringify(this.timevalue)}).then(res=>{
        // console.log(res.data.data);
        for (const obj of res.data.data) {
          obj.orderTime =HHMMSS(obj.orderTime)
          this.orderAmount.push(obj.orderAmount)
          this.orderTime.push(obj.orderTime)
        }

  var myChart = echarts.init(document.getElementById("chart"));
  var  option = {
    color:['#99CC33','#FFCC00'],
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            crossStyle: {
                color: '#999'
            }
        }
    },
    toolbox: {
        feature: {
            dataView: {show: true, readOnly: false},
            magicType: {show: true, type: ['line', 'bar']},
            restore: {show: true},
            saveAsImage: {show: true}
        }
    },
    legend: {
        data: ['下单时间', '订单金额']
    },
    xAxis: [
        {
            type: 'category',
            data: this.orderTime,
            axisPointer: {
                type: 'shadow'
            }
        }
    ],
    yAxis: [
        {
            type: 'value',
            name: '金额',
            min: 0,
            max: 150,
            interval: 10,
            axisLabel: {
                formatter: '￥ {value} '
            }
        }
    ],
    series: [
        {
            name: '下单时间',
            type: 'bar',
            data:this.orderTime
        },
        {
            name: '订单金额',
            type: 'bar',
            // yAxisIndex: 1,
            data:this.orderAmount
        }
    ]
};
      myChart.setOption(option);

      })
    }
  },
  created(){
     this.$bus.emit('subTitle','销售统计>','订单统计>')

  }
};
</script>

<style lang="less" scoped>
.chart {
  width: 100%;
  height: 400px;
  border: 1px solid #ffcc00;
  border-radius: 10px;
}
</style>